<script>
    $(function(){

        layui.use(['form', 'layedit', 'laydate'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate;

            /**
             * 初始化表单，要加上，不然刷新部分组件可能会不加载
             */
            form.render();

            //日期
            laydate.render({
                elem: '#userBirth'
            });


            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function (value) {
                    if (value.length < 5) {
                        return '标题至少得5个字符啊';
                    }
                }
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
                , content: function (value) {
                    layedit.sync(editIndex);
                }
            });

            //监听指定开关
            form.on('switch(switchTest)', function (data) {
                layer.msg('开关checked：' + (this.checked ? 'true' : 'false'), {
                    offset: '6px'
                });
                layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
            });

            //监听提交
            form.on('submit(demo1)', function (data) {
                var datas=data.field;
                $.ajax({
                    url:"/rsb/user",
                    method:'post',
                    data: datas,
                    dataType:"json",
                    success:function(data){
                        console.log(data);
                        if(data==1){
                            alert("添加成功！");
                        }
                        if(data==2){
                            alert("修改成功！");
                        }
                    }
                })
            });

            //表单初始赋值
            form.val('example', {
                "username": "贤心" // "name": "value"
                , "password": "123456"
                , "interest": 1
                , "like[write]": true //复选框选中状态
                , "close": true //开关状态
                , "sex": "女"
                , "desc": "我爱 layui"
            })

            //部门职位，二级联动
            form.on('select(dep)',function(data){
                var url="/showPost?dep="+data.value;
                $.get(url,function (data) {
                    var tmp='<option value="">请选择</option>';
                    for (var i in data){
                        tmp +='<option value="'+data[i]+'">'+data[i]+'</option>';
                    }
                    $("#userPost").html(tmp);
                    layui.form.render("select");
                });
            })

            var test = getQueryVariable("employName");
            /*alert(test);*/

            //超链接过来显示某位员工的基本信息
            $.ajax({
                url:"/showEmployee?employName="+test+"",
                success:function(data){
                    console.log(data);
                    if(data!=null){
                        $("#NameName").val(data.userName);
                        $("#userNum").val(data.userNum);
                        $("#userIdnum").val(data.userIdnum);
                        /*var select = 'dd[lay-value=' + data.userDep + ']';
                        $('#userDep').siblings("div.layui-form-select").find('dl').find(select).click();*/

                        $('#userDep option').each(function () {
                            if($(this).val()==(data.userDep)){
                                $(this).attr("selected",true);
                            }
                        });

                        $("#userPost").append("<option value='"+data.userPost+"' selected>"+data.userPost+"</option>");

                        var select1 = 'dd[lay-value=' + data.userStatus + ']';
                        $('#userStatus').siblings("div.layui-form-select").find('dl').find(select1).click();
                        var select2 = 'dd[lay-value=' + data.userSex + ']';
                        $('#userSex').siblings("div.layui-form-select").find('dl').find(select2).click();
                        $("#userBirth").val(data.userBirth);
                        $("#userPhone").val(data.userPhone);
                        $("#userNp").val(data.userNp);
                        var select3 = 'dd[lay-value=' + data.userEducation + ']';
                        $('#userEducation').siblings("div.layui-form-select").find('dl').find(select3).click();
                        var select4 = 'dd[lay-value=' + data.userFace + ']';
                        $('#userFace').siblings("div.layui-form-select").find('dl').find(select4).click();
                        var select5 = 'dd[lay-value=' + data.userMarry + ']';
                        $('#userMarry').siblings("div.layui-form-select").find('dl').find(select5).click();
                    }
                    layui.form.render("select");
                }
            })


        });







    })

    //得到超链接传来的值
    function getQueryVariable(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var index = window.location.href.indexOf("?");
        var query = window.location.href.substr(1).substring(index);
        var r = query.match(reg);
        if ( r != null ){
            return decodeURI(r[2]);
        }else{
            return null;
        }
    }
    /*var test = getQueryVariable("userName");
    alert(test);*/



</script>
<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main" id="aaaaaaaaaa">
        <form class="layui-form" id="submitForm"  enctype="multipart/form-data" lay-filter="showform">
            <blockquote class="layui-elem-quote layui-text">
                鉴于小伙伴的普遍反馈，先温馨提醒两个常见“问题”：1. <span style="color: red">此为真实信息，请勿随意修改或填入假信息!</span>2.<span style="color: red">请注意表格填入格式，以免填错</span>
            </blockquote>
            <div style="margin-right: 50px">
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="demo1">保存添加/更改</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend style="font-weight: bolder;font-size: 28px">人员档案</legend>
            </fieldset>

            <div class="layui-form-item">
                <!--右边div是展示头像-->
                <div class="layui-inline" style="float: right;height: 200px;margin-right: 100px">
                    <div style="border: #F0F0F0 1px solid;text-align: center;height: 180px;line-height: 180px;">
                        上传工作头像
                        <img src="">
                    </div>
                    <div class="layui-input-inline" style="height: 19px">
                        <input type="file" name="img">
                    </div>
                </div>
                <!--左边div是基本信息-->
                <div style="margin-left: 70px">
                    <div class="layui-inline">
                        <label class="layui-form-label">编号</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="userNum" id="userNum"  lay-verify="" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName"  id="NameName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <select  name="userSex" id="userSex">
                                <option ></option>
                                <option value="男">男</option>
                                <option value="女">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">出生日期</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userBirth"  id="userBirth" lay-verify="date" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">身份证号码</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userIdnum"  id="userIdnum" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">政治面貌</label>
                        <div class="layui-input-inline">
                            <select  name="userFace" id="userFace">
                                <option></option>
                                <option value="群众">群众</option>
                                <option value="共青团员">共青团员</option>
                                <option value="党员">党员</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属部门</label>
                        <div class="layui-input-inline">
                            <select  name="userDep" id="userDep" lay-filter="dep">
                                <option></option>
                                <option value="无">无</option>
                                <option value="人事部">人事部</option>
                                <option value="研发部">研发部</option>
                                <option value="生产部">生产部</option>
                                <option value="财务部">财务部</option>
                                <option value="销售部">销售部</option>
                                <option value="物资部">物资部</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">职位</label>
                        <div class="layui-input-inline">
                            <select name="userPost" id="userPost" >
                                <option>请先选择部门</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">工职状态</label>
                        <div class="layui-input-inline">
                            <select  name="userStatus" id="userStatus">
                                <option></option>
                                <option value="在职">在职</option>
                                <option value="停职">停职</option>
                                <option value="离职">离职</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">联系电话</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userPhone" id="userPhone" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">籍贯</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userNp" id="userNp" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">学历</label>
                        <div class="layui-input-inline">
                            <select  name="userEducation" id="userEducation">
                                <option></option>
                                <option value="专科">专科</option>
                                <option value="本科">本科</option>
                                <option value="硕士">硕士</option>
                                <option value="博士">博士</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">婚姻状况</label>
                        <div class="layui-input-inline">
                            <select  name="userMarry" id="userMarry">
                                <option></option>
                                <option value="已婚">已婚</option>
                                <option value="未婚">未婚</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
        </form>
        <div >
            <table cellspacing="0px" cellpadding="0px" border="1px" style="width: 1300px;border: #E0E0E0 1px solid;
                margin-left: 100px;margin-top: 30px;text-align: center;font-size: 14px;">
                <tr><td colspan="6" style="margin-left: 20px;text-align: left">教育经历</td></tr>
                <tr>
                    <td style="width: 4%">序号</td>
                    <td style="width: 18%">开始时间</td>
                    <td style="width: 18%">结束时间</td>
                    <td style="width: 18%">学校名称</td>
                    <td style="width: 18%">专业</td>
                    <td style="width: 18%">学历</td>
                </tr>
                <tr><td>1</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
                <tr><td>2</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
                <tr><td>3</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
                <tr><td>4</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
            </table>
        </div>
        <div >
            <table cellspacing="0px" cellpadding="0px" border="1px" style="width: 1300px;border: #E0E0E0 1px solid;
                margin-left: 100px;margin-top: 30px;text-align: center;font-size: 14px;margin-bottom: 30px">

                <tr><td colspan="7" style="margin-left: 20px;text-align: left">工作简历</td></tr>
                <tr>
                    <td style="width: 4%">序号</td>
                    <td style="width: 15.5%">开始时间</td>
                    <td style="width: 15.5%">结束时间</td>
                    <td style="width: 15.5%">工作单位</td>
                    <td style="width: 15.5%">所在部门</td>
                    <td style="width: 15.5%">工作内容</td>
                    <td style="width: 15.5%">离职原因</td>
                </tr>
                <tr><td>1</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
                <tr><td>2</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
                <tr><td>3</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
                <tr><td>4</td><td><input type="text" ></td><td><input type="text" ></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td><td><input type="text"></td></tr>
            </table>
        </div>
    </div>
</div>
<style>
    tr{
        height: 30px;
        line-height: 30px;
    }
    td input{
        width: 98%;
        height: 98%;
        border: none;
    }
</style>